<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <h:head>
        <title>Admin Page</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <!--Bootstrap core css-->
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
        <!--MetisMenu css-->
        <link href="css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet" type="text/css"/>
        <!--Timeline css-->
        <link href="css/plugins/timeline.css" rel="stylesheet" type="text/css"/>
        <!--Custom css-->
        <link href="css/sb-admin-2.css" rel="stylesheet" type="text/css"/>

        <!-- Custom Fonts -->
        <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
        <!--Toastr alert css-->
        <link href="css/toastr.min.css" rel="stylesheet" type="text/css"/>


        <!-- jQuery Version 1.11.0 -->
        <script src="js/jquery-1.11.0.js" type="text/javascript"></script>
        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <!-- Metis Menu Plugin JavaScript -->
        <script src="js/plugins/metisMenu/metisMenu.min.js" type="text/javascript"></script>        
        <!-- Custom Theme JavaScript -->
        <script src="js/sb-admin-2.js" type="text/javascript"></script>
        <!--toastr alert JavaScript-->
        <script src="js/toastr.min.js" type="text/javascript"></script> 

    </h:head>
    <h:body>
        <h:form >
            <div id="wrapper">
                <!--Navigation-->
                <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="index.xhtml"><i class="glyphicon glyphicon-home"></i> Admin Page v2.0</a>
                    </div>
                    <!--End .navbar-header-->
                    <ul class="nav navbar-top-links navbar-right">
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-envelope fa-fw"></i> <span class="badge" style="background-color: white; color: red;">#{notificationManager.messages.size()}</span><i class="fa fa-caret-down"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-messages">
                                <c:choose>
                                    <c:when test="#{notificationManager.messages != null}">
                                        <c:forEach var="i" items="#{notificationManager.messages}">
                                            <li>
                                                <a href="message.xhtml?msgId=#{i.id}">
                                                    <div>
                                                        <strong>#{i.sender}</strong>
                                                        <span class="pull-right text-muted">
                                                            <em>#{i.timesent}</em>
                                                        </span>
                                                    </div>
                                                    <div>#{i.content}</div>                                                    
                                                </a>
                                            </li>  
                                        </c:forEach>
                                    </c:when>
                                    <c:otherwise>
                                        <li class="divider"></li>
                                    </c:otherwise>
                                </c:choose> 
                            </ul>
                            <!-- /.dropdown-messages -->
                        </li>
                        <!-- /.dropdown -->                                      
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-bell fa-fw"></i> <span class="badge" style="background-color: white; color: red;">#{notificationManager.newRegis+notificationManager.newComments}</span> <i class="fa fa-caret-down"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-alerts">
                                <li>
                                    <a href="#">
                                        <div>
                                            <i class="fa fa-users fa-fw"></i>#{notificationManager.newRegis} employees registered
                                            <span class="pull-right text-muted small">2 days ago</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#">
                                        <div>
                                            <i class="fa fa-comments fa-fw"></i> #{notificationManager.newComments} new comments
                                            <span class="pull-right text-muted small">2 days ago</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                
                            </ul>
                            <!-- /.dropdown-alerts -->
                        </li>
                        <!-- /.dropdown -->
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-user fa-fw"></i>  <i class="fa fa-caret-down"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
                                </li>
                                <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <h:commandLink value="Logout" action="#{login.logout()}"> <i class="fa fa-sign-out fa-fw"/></h:commandLink>
                                </li>
                            </ul>
                            <!-- /.dropdown-user -->
                        </li>
                        <!-- /.dropdown -->
                    </ul>
                    <!--End .navbar-top-links-->
                    <div class="navbar-default sidebar" role="navigation">
                        <div class="sidebar-nav navbar-collapse">
                            <ul class="nav" id="side-menu">                                
                                <li>
                                    <a href="index.xhtml" class="active"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
                                </li>                            
                                <li>                                
                                    <a href="#collapseEvent" data-toggle="collapse" data-parent="#accordion"><i class="fa fa-book fa-fw"></i> Events<i class="pull-right fa fa-plus"></i></a>
                                    <div id="collapseEvent" class="panel-collapse collapse">
                                        <ul class="nav nav-second-level">
                                            <li>
                                                <a href="events.xhtml">Events</a>
                                            </li>
                                            <li>
                                                <a href="eventpu.xhtml">Create New Event</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- /.nav-second-level -->
                                </li>
                                <li>
                                    <a href="#collapseEm" data-toggle="collapse" data-parent="#accordion"><i class="fa fa-users fa-fw"></i> Employees<i class="pull-right fa fa-plus"></i></a>
                                    <div id="collapseEm" class="panel-collapse collapse">
                                        <ul class="nav nav-second-level">
                                            <li>
                                                <a href="employees.xhtml">Employees</a>
                                            </li>
                                            <li>
                                                <a href="createemployee.xhtml">Create New Employee</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- /.nav-second-level -->
                                </li> 
                                <li>
                                    <a href="index.xhtml" class="active"><i class="fa fa-envelope fa-fw"></i> Messages</a>
                                </li>
                                <li>
                                    <a href="index.xhtml" class="active"><i class="fa fa-bell fa-fw"></i> Notification</a>
                                </li>
                                <li>
                                    <a href="index.xhtml" class="active"><i class="fa fa-cogs fa-fw"></i> Setting</a>
                                </li>
                            </ul>
                        </div>
                        <!-- /.sidebar-collapse -->
                    </div>
                    <!-- /.navbar-static-side -->
                </nav>
                <div id="page-wrapper">
                    <ui:insert name="page-content">
                    </ui:insert>
                </div>
                <!--End page-wrapper-->
            </div>
            <!--End wrapper--> 
            <!-- Footer -->
        </h:form>
        <footer>
            <footer>
                <div class="container text-center text-muted">
                    <div class="row">
                        <div class="col-lg-12 footer-below">
                            <p><a href="#">Blue Pumpkin</a> is a project maintained by Group 1 - C1209I.
                                <br/>@ Copyright Blue Pumpkin 2014</p>
                        </div>
                    </div>
                </div>
            </footer>
        </footer>       
    </h:body>
</html>
